<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 实例生命周期函数</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            template: "<div>{{message}}</div>",
            data:{
                message: "message"
            },
            // 初始化之前 data数据还未识别报错
            beforeCreate: function () {
                console.log(this.$el, "beforeCreate");// undefined
            },
            // 初始化之后 data数据识别成功
            created: function () {
                console.log(this.$data.message, "created"); // message
            },
            // 挂载后渲染之前 挂载成功，渲染未开始
            beforeMount: function () {
                console.log(this.$el, "beforeMount"); // <div id="app"></div>
            },
            // 挂载渲染之后 挂载渲染完成
            mounted: function () {
                console.log(this.$el, "mounted");  // // <div id="app">message</div>
            },
            // 当data被修改时才会调用输出
            beforeUpdate: function(){
                console.log(this.$data.message, "beforeUpdate")
            },
            // 当data被修改之后，虚拟dom重新渲染，并应用更新
            updated: function(){
                console.log(this.$data.message, "updated")
            },
            // 销毁之前 被调用才会输出
            beforeDestroy: function () {
                console.log(this.$el, "beforeDestroy");
            },
            // 销毁之后 被调用才会输出，解除绑定，销毁子组件以及事件监听
            destroyed: function () {
                console.log(this.$el, "destroyed");
            }
        })
    </script>
</body>
</html>